<script setup lang="ts">
import { City, Log, SettingTwo, WeixinPeopleNearby, DatabasePoint } from '@icon-park/vue-next'
</script>

<template>
  <div class="page_home">
    <div class="nav">
      <div>
        <div class="sigle" @click="$router.push({ name: 'logList' })">
          <Log theme="outline" size="18" />
          <span>记录</span>
        </div>
        <div class="sigle" @click="$router.push({ name: 'teamList' })">
          <WeixinPeopleNearby theme="outline" size="18" />
          <span>班组</span>
        </div>
        <div class="sigle" @click="$router.push({ name: 'projList' })">
          <City theme="outline" size="18" />
          <span>工程</span>
        </div>
        <div class="sigle" @click="$router.push({ name: 'subpackage' })">
          <DatabasePoint theme="outline" size="18" />
          <span>匹配</span>
        </div>
      </div>
      <div class="foot" @click="$router.push({ name: 'config' })">
        <div class="sigle">
          <SettingTwo theme="outline" size="18" />
          <span>设置</span>
        </div>
      </div>
    </div>
    <div>
      <RouterView />
    </div>
  </div>
</template>

<style scoped lang="scss">
.page_home {
  @apply h-screen grid grid-cols-[60px_1fr] bg-[#033B3D];
  .nav {
    @apply flex flex-col justify-between items-center mt-5 cursor-pointer;
    .sigle {
      @apply m-2 text-xs bg-[#61727C] px-2 py-1 flex flex-col gap-1 items-center rounded-sm;
    }
    .foot {
      @apply mb-2;
    }
  }
}
</style>
